<template>
  <div class="aside">
    <ul class="nav_aside">
      <li @click="changePage('userdata')">
        个人资料
      </li>
      <li @click="changePage('ginseng_balance')">
        种子余额
      </li>
      <li @click="changePage('assets');">
        我的资产
      </li>
      	<li @click="changePage('gengseng_dugresult')">
   	 		挖参结果
   	 	</li>
      <li @click="changePage('gameLog');">
        游戏日志
      </li>
    </ul>
  </div>
</template>

<script>
  import $ from 'jquery'

  export default {
    name: 'ginsengNav',
    mounted() {
      this.setShadow();
    },
    methods: {
      setShadow() {
        var path = location.pathname.split("/")[1];
        if (path === 'userdata') {
          $('.nav_aside li:eq(0)').css({
            'color': '#c7c7c7',
            'background': 'url("../../static/image/bg_btn.png") no-repeat',
            'background-size': '100% 100%'
          })
        }else if(path === 'ginseng_balance'){
          $('.nav_aside li:eq(1)').css({
            'color': '#c7c7c7',
            'background': 'url("../../static/image/bg_btn.png") no-repeat',
            'background-size': '100% 100%'
          })
        }else if(path === 'assets'){
          $('.nav_aside li:eq(2)').css({
            'color': '#c7c7c7',
            'background': 'url("../../static/image/bg_btn.png") no-repeat',
            'background-size': '100% 100%'
          })
        }else if(path === 'gameLog'){
          $('.nav_aside li:eq(3)').css({
            'color': '#c7c7c7',
            'background': 'url("../../static/image/bg_btn.png") no-repeat',
            'background-size': '100% 100%'
          })
        }
      },
      changePage(pathname) {
        this.$router.push({path: '/' + pathname});
        location.reload();
      }
    }
  }
</script>

<style>
  @import url("../css/base.css");

  .aside {
    padding: 24px;
    display: inline-block;
    width: 18%;
    height: 957px;
    background: url(../../static/image/ginseng_nav.png) no-repeat scroll top left;
    background-size: 100% 100%;
    vertical-align: top;
  }

  .nav_aside > li {
    /*position: relative;*/
    background: url(../../static/image/z_7.png) no-repeat scroll top left;
    background-size: 100% 100%;
    height: 45px;
    width: 100%;
    margin-bottom: 15px;
    text-align: center;
    line-height: 40px;
    font-family: "MicrosoftYaHei-Bold";
    font-size: 16px;
    /* font-weight: bold; */
    color: #ffffff;
    cursor: pointer;
    /* text-shadow: 3px 0px 1px rgba(137, 64, 0, 0.75); */
     /* text-shadow: 0 2.5px #a6600a, 2px 0 #a6600a, -2px 0 #a6600a, 0 -1px #a6600a; */
     text-shadow: 0 2px #a6600a, 2px 0 #a6600a, -2px 0 #a6600a, 0 -1px #a6600a;
  }
</style>
